<template>
  <div class="login flex fdc aic">
    <p class="item">
      <input v-model="username" type="text" placeholder="请输入用户名" />
    </p>
    <p class="item">
      <input v-model="password" type="text" placeholder="请输入密码" />
    </p>
    <button class="btn" @click="login">立即登录</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useStore } from "../../pinia";
import { storeToRefs } from "pinia";
import request from "../../api/request";
import {useRouter} from 'vue-router'

const router = useRouter();
const store = useStore();
let { username, password } = storeToRefs(store);

const login = async () => {
  let data = {
    username: username.value,
    password: password.value,
  };
  let res = await request.post("/bible_user/login", data);
  store.$patch((state) => {
    state.bible_userId = res.data.bible_userId;
  });
  router.push('/')
};
</script>

<style lang="less">
.login {
  margin-top: 20px;
  .item {
    width: 80%;
  }
  input {
    width: 100%;
    height: 40px;
    border: none;
    border-bottom: 1px solid #999;
    outline: none;
    padding-left: 10px;
    &:last-child {
      margin-top: 15px;
    }
  }
  .btn {
    height: 40px;
    width: 60%;
    border: none;
    border-radius: 10px;
    background: #c03d37;
    color: #fff;
    margin-top: 30px;
  }
}
</style>